<template>
  <div>
    <!-- 完成 -->
    <!-- 头部导航栏 -->
    <navbar-comm title="账号登录"></navbar-comm>
    <!-- /头部导航栏 -->
    <!-- 账号密码表单 -->
    <van-form @submit="onSubmit" validate-first>
      <van-field
        v-model="username"
        name="用户名"
        placeholder="请输入账号"
        :rules="[{ pattern, message: '用户名格式为5-8位的字母和数字' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        placeholder="请输入密码"
        :rules="[{ validator, message: '昵称格式为5-12位的字母和数字' }]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit" class="submitBtn"
          >登 录</van-button
        >
      </div>
    </van-form>
    <!-- /账号密码表单 -->
    <!-- 提醒注册区 -->
    <div class="register" @click="toRegister">还没有账号，去注册~</div>
    <!-- /提醒注册区 -->
  </div>
</template>

<script>
import NavbarComm from '@/components/NavbarComm.vue'
// 引入接口
import { userLogintApi } from '@/api'
// 引入vuex相关
import { mapMutations } from 'vuex'
export default {
  name: 'LoginIndex',
  components: { NavbarComm },
  props: {},
  data() {
    return {
      username: '',
      password: '',
      pattern: /^[a-zA-Z0-9_-]{5,8}$/,
      timer: null
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    ...mapMutations(['getUserToken']),
    async onSubmit(values) {
      // console.log('submit', values)
      // console.log(this.username, this.password)
      try {
        // 模拟错误测试
        // if (Math.random() < 0.5) {
        //   throw new Error()
        // }
        // 非空判断，如果昵称用户名为空提示，否则发送请求
        if (this.username.trim() === '' || this.password.trim() === '') {
          this.$toast('账号和密码不能为空')
        } else {
          // 不为空执行else
          const { data } = await userLogintApi(this.username, this.password)
          // console.log(data)
          // console.log(data.status)

          // console.log(data.body.token)
          // 将token存入vuex中，以便整个项目组件都可以复用
          // 利用反选链，密码昵称正确就成功登录有token就执行语句更新token，错误的话返回undifined,veux中更新一个空对象（打开本地存储可查看）
          this.getUserToken(data.body?.token)
          if (data.status === 200) {
            this.$toast.success(data.description)
            // 登录过程如果网络延时的频繁点击就会报错，用加载中轻提示
            this.$toast.loading({
              message: '加载中...',
              forbidClick: true //加载过程中禁止点击背景页面
            })
            if (this.timer) clearTimeout(this.timer)
            this.timer = setTimeout(() => {
              this.$router.push('/my')
            }, 1000)
          }
          if (data.status === 400) {
            this.$toast.fail(data.description)
          }
          // console.log(data.status)
        }
      } catch (err) {
        // console.log(err)
        this.$toast('加载错误，请重试')
      }
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /^[a-zA-Z0-9_-]{5,12}$/.test(val)
    },
    //去注册
    toRegister() {
      this.$router.push('/login/register')
    }
  }
}
</script>

<style scoped lang="less">
.navBar {
  background-color: #21b97a;
  .leftArrow {
    color: #fff;
  }
}
:deep(.van-nav-bar__title) {
  color: #fff;
  font-size: 36px;
}
.submitBtn {
  background-color: #21b97a;
}
:deep(.van-field__control) {
  height: 120px;
  font-size: 34px;
}
:deep(.van-button--normal) {
  height: 100px !important;
  font-size: 36px;
}
.register {
  color: #666;
  font-size: 28px;
  text-align: center;
  margin-top: 72px;
}
</style>
